<template>
  <div class="search-form-content">
    <div
      class="form-item"
      :class="{ hasbg: index % 2 > 0 ? true : false }"
      v-for="(item, index) in props.formList"
      :key="index"
    >
      <div class="label">
        {{ item.displayName }}
      </div>
      <div class="content">
        <template
          v-if="
            (item.inputType === 'text' ||
              item.inputType === 'number' ||
              item.inputType === 'date') &&
            item.matchOptions.length > 0
          "
        >
          <selectInput :itemObject="item" v-model="search[index]"></selectInput>
        </template>
        <template v-else-if="item.inputType === 'text'">
          <el-input
            style="width: 220px"
            v-model="search[index].value"
            :placeholder="'请输入' + item.displayName"
            clearable
          ></el-input>
        </template>
        <template v-else-if="item.inputType === 'multi_select'">
          <checkboxSelect
            :itemObject="item"
            v-model="search[index]"
          ></checkboxSelect>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch } from "vue";
import selectInput from "./selectInput.vue";
import checkboxSelect from "./checkboxSelect.vue";
const props = defineProps({
  formList: Array,
});

const emit = defineEmits(["update:modelValue", "search"]);
let ruleFormRef = ref(null);
let search = ref([]);
watch(
  () => props.formList,
  (newVal) => {
    search.value = [];
    newVal.forEach((item) => {
      search.value.push({
        fieldName: item.fieldName,
        inputType: item.inputType,
        matchOption: "",
        value: "",
      });
    });
   
  },
  {
    immediate: true,
  }
);

watch(
  search,
  (newVal) => {
    if (newVal.length > 0) {
      let catchData = []
      newVal.map(item => {
         if(item.value || item.length > 0){
          catchData.push(item)
         }
      })
      console.log(catchData)
      emit("update:modelValue", catchData);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

const reset = (ruleFormRef) => {
  ruleFormRef.resetFields();
  emit("search");
};

const getTableData = (ruleFormRef) => {
  emit("search");
};
</script>


<style lang="scss" scoped>
.search-form-content {
  .form-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 60px;
    overflow: hidden;
    border-bottom: 1px dashed rgba(151, 151, 151, 0.42);
    &.hasbg {
      background: rgba(246, 249, 255, 0.5);
    }
    .label {
      width: 180px;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 60px;
    }
    .content {
      border-left: 1px dashed rgba(151, 151, 151, 0.42);
      // width: 200px;
      width: calc(100% - 180px);
      padding: 0 20px;
      min-height: 60px;
      line-height: 60px;
      word-wrap: break-word;
    }
  }
}
</style>